{% extends 'cms/base.html' %}
{% load news_filters %}

{% block title %}
新闻管理
{% endblock %}

{% block head %}
    <style>
        .left-group{
            margin-right:30px;
        }
    </style>
    <link rel="stylesheet" href="{% static 'adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css' %}">
    <script src="{% static 'adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'adminlte/bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'js/news_list.min.js' %}"></script>
{% endblock %}

{% block content-header %}
新闻列表管理
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <form action="" class="form-inline">
                        <div class="form-group left-group">
                            <label for="">时间：</label>
                            {% if start %}
                                <input type="text" class="form-control" id="start-picker" placeholder="开始时间" name="start" readonly value="{{ start }}">
                            {% else %}
                                <input type="text" class="form-control" id="start-picker" placeholder="开始时间" name="start" readonly>
                            {% endif %}
                            <span>-</span>
                        {% if end %}
                            <input type="text" class="form-control" id="end-picker" placeholder="结束时间" name="end" readonly value="{{ end }}">
                        {% else %}
                            <input type="text" class="form-control" id="end-picker" placeholder="结束时间" name="end" readonly>
                        {% endif %}
                        </div>
                        <div class="form-group left-group">
                            <label for="title-input">标题：</label>
                            {% if title %}
                                <input type="text" class="form-control" placeholder="关键字" id="title-input" name="title" value="{{ title }}">
                            {% else %}
                                <input type="text" class="form-control" placeholder="关键字" id="title-input" name="title">
                            {% endif %}
                        </div>
                        <div class="form-group left-group">
                            <label for="">分类</label>
                            <select name="category" id="" class="form-control">
                                {% if category_id == 0 %}
                                    <option value="0" selected>所有分类</option>
                                {% else %}
                                    <option value="0">所有分类</option>
                                {% endif %}
                                {% for category in categories %}
                                    {% if category_id == category.pk %}
                                    <option value="{{ category.pk }}" selected>{{ category.name }}</option>
                                    {% else %}
                                    <option value="{{ category.pk }}">{{ category.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group left-group">
                            <button class="btn btn-primary">查询</button>
                        </div>
                        <div class="form-group">
                            <a href="{% url 'cms:news_list' %}">清除查询</a>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>标题</th>
                                <th>分类</th>
                                <th>发布时间</th>
                                <th>作者</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for news in newses %}
                                <tr>
                                    <td>
                                        <a href="{% url 'news:news_detail' news_id=news.pk %}" target="_blank">{{ news.title }}</a>
                                    </td>
                                    <td>{{ news.category.name }}</td>
                                    <td>{{ news.pub_time|time_format }}</td>
                                    <td>{{ news.author.username }}</td>
                                    <td>
                                        <a href="{% url 'cms:edit_news' %}?news_id={{ news.pk }}" class="btn btn-info btn-xs">编辑</a>
                                        <button class="btn btn-danger btn-xs delete-btn" data-news-id="{{ news.pk }}">删除</button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="box-footer">
                    <p class="pull-left">第{{ current_page }}页/共{{ num_pages }}页</p>
                    <ul class="pagination pull-right">
                        {#上一页#}
                        {% if page_obj.has_previous %}
                            <li><a href="?p={{ page_obj.previous_page_number }}{{ url_query }}">上一页</a></li>
                        {% else %}
                            <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
                        {% endif %}

                        {# 是否需要出现三个点 #}
                        {% if left_has_more %}
                            <li><a href="?p=1">1</a></li>
                            <li><a href="javascript:void(0);">...</a></li>
                        {% endif %}

                        {# 左边的页码 #}
                        {% for left_page in left_pages %}
                            <li><a href="?p={{ left_page }}{{ url_query }}">{{ left_page }}</a></li>
                        {% endfor %}

                        {# 当前的页面 #}
                        <li class="active"><a href="?p={{ current_page }}{{ url_query }}">{{ current_page }}</a></li>

                        {# 右边的页码 #}
                        {% for right_page in right_pages %}
                            <li><a href="?p={{ right_page }}{{ url_query }}">{{ right_page }}</a></li>
                        {% endfor %}

                        {# 用来控制右边三个点 #}
                        {% if right_has_more %}
                            <li><a href="javascript:void(0);">...</a></li>
                            <li><a href="?p={{ num_pages }}{{ url_query }}">{{ num_pages }}</a></li>
                        {% endif %}

                        {#下一页#}
                        {% if page_obj.has_next %}
                            <li><a href="?p={{ page_obj.next_page_number }}{{ url_query }}">下一页</a></li>
                        {% else %}
                            <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}